<template>
  <div class="voice-icon-wrap" ref="vc">
    <i class="iconfont icon-voice"
       @click.stop="talkStart"></i>
    <transition name="fadeShow">
      <div class="voice-wrap"
           v-if="show"
           @click="talkOver">
        <img src="../../img/speak3.gif" class="img-vc">
        <span style="font-size: 16px;">语音录入中...</span>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: {
      isSearch: {
        default: false,
      }
    },
    data() {
      return {
        msg: '',
        show: false,
      }
    },
    methods: {
      talkStart() {
        let is = this._props.isSearch;
        let self = this;
        let val;
        let el;
        self.show = true;
        if (!is) {
          el = this.$refs.vc.parentNode.parentNode.querySelector("textarea");
          val = el.value;
        }
        // 1、开始 2、 停止 3 、 取消   默认 1
        _vrvInit.voiceToTxt((v) => {
          if (is){
            let vv = v.toString().replace(/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g,"");
            _data.bus.$emit("searchVoice", vv);
          } else {
            el.value = val + v;
          }
          self.talkOver();
        }, 1);
      },
      talkOver() {
        this.show = false;
        _vrvInit.voiceToTxt((v) => {
        }, 3);
      }
    },
  }
</script>

<style lang="scss">
  .voice-wrap {
    height: 100%;
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    .img-vc {
      margin-top: 18px;
      margin-bottom: 20px;
      height: 80px;
    }
  }
</style>

